@import "~/scss/_lib/color";
@mixin color($color){
    color:$color;
    background:transparent;
    border-color:$color;
    &:hover, &:active, &:focus{
        outline:0;
        color:#f93;
        border-color:#f93;
    }
    &:hover{
        box-shadow:0 0 3px inset darken(#f93,10%);
    }
    &:focus{
        box-shadow:0 0 4px inset darken(#f93,20%);
    }
    &:active{
        box-shadow:0 0 5px inset darken(#f93,20%);
    }
    &.disabled{
        color:#999;
        border-color:#999;
        cursor: not-allowed;
    }

}
a.button,
button.button ,
.BTN.P button{
    outline:0;
    border: 1px solid;
    user-select:none;
    text-align: center;
    box-sizing: border-box;
    background:transparent;
    color:#3A6AD2;
    border-color:#3A6AD2;

    &:focus,&:hover{
        color:#444;
        background:#FECD59;
        box-shadow:0 0 5px inset darken(#FECD59, 15%);
        border-color:#FECD59;
    }
    &:active{
        background:lighten(#FECD59,10%);
        border-color:lighten(#FECD59,10%);
        color:lighten(#444,20%);
        box-shadow:0 0 8px inset darken(#FECD59,20%);
    }
    &.GRAY{
        background: #f3f3f3;
        border-color: #f3f3f3;
        &:focus{
            color:#555;
            box-shadow:0 0 5px inset darken(#f3f3f3,30%);
            border-color:lighten(#f3f3f3,10%);
        }
        &:hover{
            color:#444;
            box-shadow:0 0 5px inset darken(#f3f3f3,40%);
        }
        &:active{
            color:#333;
            box-shadow:0 0 8px inset darken(#f3f3f3,60%);
        }
    }
}
.BTN.P button,.BTN .button{
    font-size: 16px;
    padding: 0 16px;
    display:inline-block;
    box-sizing:border-box;
    letter-spacing:6px;
    font-weight:normal;
    border-width: 2px;
    padding-left: 33px;
    width:100%;
    height:52px;
    line-height:48px;
}
.BTN.P button[disabled], .button.disabled,
.BTN.P button[disabled]:focus, .button.disabled:focus,
.BTN.P button[disabled]:active, .button.disabled:active,
.BTN.P button[disabled]:hover, .button.disabled:hover{
    background:#f9f9f9;
    box-shadow:none;
    color:#ccc;
    border-color:#ccc;
    cursor: not-allowed;
}
.button{
    font-size: 16px;
    letter-spacing: 2px;
    padding: 10px 15px;
}

.button.cc{
    @include color(#ccc);
}

